<template>
  <div class="star f0"
       :class="starType">
    <span class="star-item inline-block"
          v-for="(item,index) in starClass"
          :key="index"
          :class="item">
    </span>
  </div>
</template>

<script>
const LENGTH = 5;
const CLS_ON = 'on';
const CLS_OFF = 'off';
const CLS_HALF = 'half';
export default {
  'name': '',
  'props': {
    'size': {
      'type': Number
    },
    'score': {
      'type': Number
    }
  },
  data() {
    return {};
  },
  'components': {},
  created() {
    // data数据已经初始化，但是DOM结构渲染完成，组件没有加载
  },
  mounted() {
    // DOM渲染完成，组件挂载完成
  },
  'computed': {
    starType() {
      return `star-${this.size}`;
    },
    starClass() {
      const startArray = [];
      const score = this.score;
      const hasDecimal = Number.isInteger(this.score);
      const integer = Math.trunc(score);
      for (let i = 0; i < integer; i += 1) startArray.push(CLS_ON);
      if (!hasDecimal) startArray.push(CLS_HALF);
      while (startArray.length < LENGTH)
        startArray.push(CLS_OFF);
      return startArray;
    }
  },
  'methods': {},
  'watch': {}
};
</script>

<style lang='stylus' scoped>
@import '~common/stylus/mixin'
.star
  &.star-48
    .star-item
      margin-right 22px
      &.on
        bg-image('star48_on', 20, 20)
      &.half
        bg-image('star48_half', 20, 20)
      &.off
        bg-image('star48_off', 20, 20)
  &.star-36
    .star-item
      margin-right 6px
      &.on
        bg-image('star36_on', 15, 15)
      &.half
        bg-image('star36_half', 15, 15)
      &.off
        bg-image('star36_off', 15, 15)
  &.star-24
    .star-item
      margin-right 3px
      &.on
        bg-image('star24_on', 10, 10)
      &.half
        bg-image('star24_half', 10, 10)
      &.off
        bg-image('star24_off', 10, 10)
</style>
